<template>
  <div
    id="header-reminder"
    v-if="Object.keys(notice).length"
    class="el-alert el-alert--success is-light"
  >
    <div class="main-container flex content-space-between" style="width: 100%;">
      <router-link class="flex-1" :to="`/${$rp.ANNOUNCEMENTS}`">{{ notice.title }}</router-link>
      <div>
        <timeago :date-time="notice.created_at" enable-type="auto"/>
        <span class="m-l-16 info link" @click="close">知道了</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderReminder', // 顶部公告
  data() {
    return {
      notice: {},
    };
  },
  created() { this.loadNotice(); },
  methods: {
    loadNotice() {
      this.$api.announcements.index({ per: 1 })
        .then(res => this.handleRes(res))
        .catch(() => {});
    },
    handleRes(res) {
      const notice = res.data[0];
      const readTime = Number(localStorage.getItem('noticeChecked'));
      if (readTime < new Date(notice.created_at).getTime()) this.notice = notice;
    },
    // 关闭公告
    close() {
      const today = new Date(new Date().toLocaleDateString()); // 今天（日期）
      const todayEnd = new Date(today).getTime() + ((24 * 60 * 60 * 1000) - 1);
      localStorage.setItem('noticeChecked', todayEnd);
      this.notice = {};
    },
  },
};
</script>

<style></style>
